<template name="type1">
  <!-- 简单 字体表盘 -->
  <view class="content">
    <view class="line1" :style="{ height: line1h }">
      <text>{{ "天气" }}</text>
      <view class="">
        <text>{{ week_day }}</text> <text class="YYYYMMDD">{{ YYYYMMDD }}</text>
      </view>
    </view>
    <view class="line2"> </view>
    <view class="line3" :style="{ height: line3h }">
      <text class="hhmm">{{ hhmm }}</text>
      <text class="ss">:{{ ss }}</text>
    </view>
  </view>
</template>

<script>
import common from "@/node_modules/spanman/index.js";
let timer1;
export default {
  data() {
    return {
      week_day: "周x",
      YYYYMMDD: "0000-00-00",
      hhmm: "00:00",
      ss: "00",
      w: 0, // 宽
      h: 0, // 高
      pingmu: "-", // -=横屏 |=竖屏
      line1h: "0px", // -=横屏 |=竖屏
      line3h: "100%", // -=横屏 |=竖屏
    };
  },
  mounted() {
    timer1 = null;
    timer1 = setInterval(this.init_page, 1000);
    uni.getSystemInfo({
      success: (res) => {
        console.log("res=", res);
        this.w = res.windowWidth;
        this.h = res.windowHeight;
        this.judge();
      },
    });
    uni.onWindowResize((res) => {
      // console.log('变化后的窗口宽度=' + res.size.windowWidth);
      // console.log('变化后的窗口高度=' + res.size.windowHeight);
      this.w = res.size.windowWidth;
      this.h = res.size.windowHeight;
      if (this.w > this.h) {
        // 此时为横屏
        this.pingmu = "-";
      } else {
        // 此时为竖屏
        this.pingmu = "|";
      }
      this.judge();
    });
  },
  destroyed() {
    clearInterval(timer1);
    timer1 = null;
  },
  methods: {
    init_page() {
      this.get_week();
      this.make_time();
    },
    // 根据屏幕现状动态设置字体大小
    judge() {
      if (this.pingmu == "-") {
        this.line1h = this.h * 0.3 + "px";
        // this.line3h = (this.h - this.line1h - 30) + "px";
      } else {
        this.line1h = this.h * 0.3 + "px";
        // this.line3h = (this.h - this.line1h - 30) + "px";
      }
    },
    // 获取周几
    get_week() {
      let date = new Date();
      let week_day = date.getDay();
      console.log("week_day timer1 ", week_day);
      let res_str = "周x";
      switch (week_day) {
        case 0:
          res_str = "周天";
          break;
        case 1:
          res_str = "周一";
          break;
        case 2:
          res_str = "周二";
          break;
        case 3:
          res_str = "周三";
          break;
        case 4:
          res_str = "周四";
          break;
        case 5:
          res_str = "周五";
          break;
        case 6:
          res_str = "周六";
          break;
        default:
          break;
      }
      this.week_day = res_str;
    },
    // 天气 https://www.juhe.cn/docs/api/id/73
    get_tianqi() {
      uni
        .request({
          url: "http://apis.juhe.cn/simpleWeather/query?city=西安&key=",
          method: "get",
        })
        .then((res) => {
          console.log("res：", res);
        });
    },
    get_loca() {
      console.log("当前位置的经度：");
      uni.getLocation({
        type: "wgs84",
        geocode: true,
        success: (res) => {
          console.log("res：", res);
          console.log("当前位置的经度：", res.longitude);
          console.log("当前位置的纬度：", res.latitude);
        },
      });
    },
    make_time() {
      this.YYYYMMDD = common.getDate("YYYY-MM-DD");
      this.hhmm = common.getDate("hh:mm");
      this.ss = common.getDate("ss");
    },
  },
};
</script>

<style>
.content {
  background: #1d1d1f;
  color: #f5f5f7;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.line1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 20px;
  /* background: red; */
  font-size: 3em;
}

.line2 {
  height: 0px;
  /* background: #f5f5f7; */
}

.line3 {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 0 20px;
  /* background: green; */
}

.YYYYMMDD {
  margin-left: 20px;
}

.hhmm {
  font-size: 11em;
  /* background: blue; */
}

.ss {
  font-size: 5em;
  /* background: pink; */
}
</style>
